<template>
  <div class="container">
    <div class="header-content">
      <h3>管理员管理</h3>
    </div>
    <div class="my-content">
      <div class="my-content-item" v-if="managerPage">
        <template>
          <el-table
            height="400px"
            :data="managerPage.records"
            border
            stripe
            style="width: 100%"
          >
            <el-table-column
              fixed=""
              prop="name"
              label="管理员姓名"
              width="120"
            >
            </el-table-column>
            <el-table-column prop="gender" label="性别" width="80">
            </el-table-column>
            <el-table-column
              prop="phone"
              label="手机号"
              width="120"
            ></el-table-column>
            <el-table-column label="邮箱" prop="email" width="180">
            </el-table-column>
            <el-table-column label="类型" prop="type" width="120">
            </el-table-column>
            <el-table-column label="大学" prop="university" width="180">
            </el-table-column>
            <el-table-column label="创建时间" width="220"
              ><template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{
                  scope.row.createTime
                }}</span>
              </template></el-table-column
            >
            <el-table-column label="操作" width="120">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </template>
        <div class="pagination-content">
          <template>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="pageParams.pageNo"
              :page-sizes="[5,10,15,20,25]"
              :page-size.sync="pageParams.pageSize"
              :pager-count="5"
              layout=" total,sizes, prev, pager,next,jumper"
              :total="managerPage.total"
            >
            </el-pagination>
          </template>
        </div>
      </div>
      <div class="my-content-item" v-else>
        <el-empty
          v-if="managerType == '超级管理员'"
          description="没有任何一级管理员信息"
        ></el-empty>
        <el-empty
          v-if="managerType == '一级管理员'"
          description="没有任何二级管理员信息"
        ></el-empty>
      </div>
    </div>
  </div>
</template>
      </div>
    </div>
  </div>
</template>

<script>
import { getManagerListByType, deleteManagerById } from "@/api";
export default {
  data() {
    return {
      managerPage: {
        records: [],
        total: 0,
        current: 1,
      }, //档案录入权限申请处理情况
      pageParams: {
        pageNo: 1, //当前页
        pageSize: 5, //当前页大小
      },
      managerType: "", //当前管理员级别
    };
  },
  created() {
    this.getMangers();
    this.managerType = this.$store.state.user.userInfo.type;
  },
  methods: {
    //查询所有一级管理员
    async getMangers() {
      let managerType = this.$store.state.user.userInfo.type;
      let type = 0;
      let params = this.pageParams;
      if (managerType === "超级管理员") {
        type = 1;
      } else if (managerType === "一级管理员") {
        type = 2;
        params.universityId = this.$store.state.user.userInfo.universityId;
      }
      let res = await getManagerListByType(type, params);
      if (res.code == 0) {
        this.managerPage.records = res.data.records;
        this.managerPage.total = res.data.total;
        this.managerPage.current = res.data.current;
      } else {
        this.managerPage = null;
      }
    },
    handleSizeChange(val) {
      this.getMangers();
    },
    handleCurrentChange(val) {
      this.getMangers();
    },
    //删除管理员
    async handleDelete(index, row) {
      let res = await deleteManagerById(row.id);
      if (res.code == 0) {
        this.$message.success("删除" + row.type + row.name + "成功");
        this.getMangers();
      } else {
        this.$message.error(res.msg);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  background: #f0f2f5;
  padding: 10px;
  display: flex;
  align-items: center;
  flex-direction: column;
  .header-content {
    width: 70%;
    border-bottom: 1px solid rgb(217, 212, 212);
    text-align: center;
    border-radius: 10px 10px 0px 0px;
    background: rgb(255, 255, 255);
  }
  .my-content {
    height: 540px;
    padding-bottom: 20px;
    border-radius: 0px 0px 10px 10px;
    background: rgb(255, 255, 255);
    width: 70%;
    .my-content-item {
      padding: 15px;
    }
    .pagination-content {
      margin-top: 20px;
      text-align: center;
    }
  }
}
</style>